<!doctype html>
<html style="font-size:50px;">
<head>
    <meta charset="utf-8">
    <title>个人资料</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no" />
	<link type="text/css" rel="stylesheet" href="../css/profile.css" />
	<link href="../css/mui.picker.min.css" rel="stylesheet" />
    <link href="../css/mui.poppicker.css" rel="stylesheet" />
    <link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
	<header>
		<div class="header-body">
			<div class="user">
				<img src="../img/avatar.png" />
				<span>昵称：西门子家电</span>
				<p>NO：1234567890</p>
			</div>
			<div class="card">
				<div class="card-body">
				</div>
			</div>
		</div>
		<div class="header-footer">
            <div class="btn-border">
                <img src="../img/profile_score.png" />
                <span>家电积分</span><span>|</span><span>100</span>
            </div>
            <div class="btn-border">
                <img src="../img/profile_deal.png" />
                <span>交易次数</span><span>|</span><span>100</span>
            </div>
		</div>
		<table class="table-header">
			<tr>
				<td>
					<div class="user">
						<img src="../img/avatar.png" />
						<span>昵称：西门子家电</span>
						<p>NO：1234567890</p>
					</div>
				</td>
				<td>
					<div class="card">
						<div class="card-body">
						</div>
					</div>
				</td>
			</tr>
		</table>
		<table class="table-footer">
			<tr>
				<th>
					 <div class="btn-border">
		                <img src="../img/profile_score.png" />
		                <span>家电积分</span><span>|</span><span>100</span>
		            </div>
		            <div class="btn-border">
		                <img src="../img/profile_deal.png" />
		                <span>交易次数</span><span>|</span><span>100</span>
		            </div>
	            </th>
			</tr>
		</table>
	</header>
	<div class="info-body">
		<div class="tab">
			<div title="1" class="select">
				<img src="../img/profile_icon_person.png" />
				<span>个人信息</span>
			</div>
			<div title="2">
				<img src="../img/profile_icon_history.png" />
				<span>历史积分</span>
			</div>
			<div title="3">
				<img src="../img/profile_icon_record.png" />
				<span>交易记录</span>
			</div>
			<div title="4">
				<img src="../img/product.png" />
				<span>我的产品</span>
			</div>
		</div>
		<div class="show-body">
			<div class="profile-body">
				<form>
					<div class="one">
						<p>联系方式</p>
						<div class="form-body">
							<div class="border-bottom-1px">
								<i>*</i><input class="full" placeholder="请输入手机号码"/>
							</div>
						</div>
					</div>
					<div class="one">
						<p>我们该如何称呼您</p>
						<div class="form-body">
							<div class="border-bottom-1px">
								<i>*</i><input class="name" placeholder="姓名"/>
							</div>
							<div class="border-bottom-1px">
								<i>*</i>
								<select class="sex" name="sex">
									<option value="1" selected="selected">称谓</option>
									<option>先生</option>
									<option>女士</option>
								</select><img class="mobile" src="../img/icon_down.png">
							</div>
						</div>
					</div>
					<div class="one">
						<p>出生日期</p>
						<div class="pc form-body">
							<div class="border-bottom-1px">
								<i>*</i><select class="three" name="sex">
									<option value="1" selected="selected">年</option>
									<option>先生</option>
									<option>女士</option>
								</select>
							</div>
							<div class="border-bottom-1px">
								<i>*</i><select class="three" name="sex">
									<option value="1" selected="selected">月</option>
									<option>先生</option>
									<option>女士</option>
								</select>
							</div>
							<div class="border-bottom-1px">
								<i>*</i><select class="three" name="sex">
									<option value="1" selected="selected">日</option>
									<option>先生</option>
									<option>女士</option>
								</select>
							</div>
						</div>
						<div class="mobile form-body">
							<div class="birth border-bottom-1px">
								<i>*</i><input placeholder="请选择出生日期"/>
							</div>
						</div>
					</div>
					<div class="one">
						<p>地区</p>
						<div class="pc form-body">
							<div class="border-bottom-1px">
								<i>*</i><select class="three" name="sex">
									<option  value="1" selected="selected">省</option>
									<option>先生</option>
									<option>女士</option>
								</select>
							</div>
							<div class="border-bottom-1px">
								<i>*</i><select class="three" name="sex">
									<option  value="1" selected="selected">市</option>
									<option>先生</option>
									<option>女士</option>
								</select>
							</div>
							<div class="border-bottom-1px">
								<i>*</i><select class="three" name="sex">
									<option value="1" selected="selected">区</option>
									<option>先生</option>
									<option>女士</option>
								</select>
							</div>
						</div>
						<div class="mobile form-body">
							<div class="picker border-bottom-1px">
								<i>*</i><input placeholder="请选择省市区"/>
							</div>
						</div>
						<div class="form-body" style="margin-top:30pt;">
							<div class="border-bottom-1px">
								<input class="full" placeholder="请输入收货地址（选填）"/>
							</div>
						</div>
					</div>
					<div class="one">
						<p>邮箱</p>
						<div class="form-body">
							<div class="border-bottom-1px">
								<input class="full" placeholder="请输入邮箱（选填）"/>
							</div>
						</div>
					</div>
				</form>
				<div class="button-body">
					<button>保存</button>
					<button>取消</button>
				</div>
			</div>
			<div class="hide score-body">
		        <table border="0" cellpadding="0" cellspacing="0">
		            <tr>
		                <th>时间</th>
		                <th>事件</th>
		                <th>西门子家电积分</th>
		            </tr>
		            <tr>
		                <td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		            <tr>
		                <td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		             <tr>
		                 <td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		             <tr>
		                <td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		             <tr>
		                <td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		             <tr>
		              	<td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		             <tr>
		                <td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		             <tr>
		                <td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		             <tr>
		                 <td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		             <tr>
		                 <td>2017-01-01</td>
		                <td>签到</td>
		                <td>+10</td>
		            </tr>
		        </table>    
			</div>
			<div class="hide record-body">
		        <table border="0" cellpadding="0" cellspacing="0">
		            <tr>
		                <th>订单号</th>
		                <th>交易时间</th>
		                <th>交易金额</th>
		            </tr>
		            <tr>
		                <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		            <tr>
		                <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		             <tr>
		                <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		             <tr>
		                <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		             <tr>
		                <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		             <tr>
		               <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		             <tr>
		                 <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		             <tr>
		                <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		             <tr>
		                 <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		             <tr>
		                 <td>0000000</td>
		                <td>2017-01-01</td>
		                <td>100元</td>
		            </tr>
		        </table>    
			</div>
			<div class="hide product-body">
		        <table border="0" cellpadding="0" cellspacing="0">
		            <tr>
		            	<th></th>
		                <th>交易时间</th>
		                <th>产品型号</th>
		                <th>产品类型</th>
		                <th>状态</th>
		            </tr>
		            <tr class="disable-click">
		            	<td class="icon">
		                
		                </td>
		                <td>2017-01-01</td>
		                <td>66AA950+71F233</td>
		                <td>冰箱啊</td>
		                <td>
		                	<img src="../img/staus_org.png" />
		                </td>
		            </tr>
		            <tr >
		            	<td class="icon">
		            		<img  class="unselect" src="../img/product_unselect.png">
		                	<img class="select hide" src="../img/product_select.png">
		                </td>
		                <td>2017-01-01</td>
		                <td>66AA950+71F233</td>
		                <td>冰箱啊</td>
		                <td>
		                	<img src="../img/status_blue.png">
		                </td>
		            </tr>
		        </table>    
		        <a href="repair.html">点击前往申请延保 ></a>
		        <div class="button-body">
					<button class="register">注册</button>
					<button class="cancel">取消</button>
				</div>
			</div>
		</div>
	</div>
	<footer>
        返回首页
    </footer>
     <div class="alert hide">
		<div class="alert-body">
			<h6>提示</h6>
			<img src="../img/alert.png" />
			<p>注册成功</p>
			<button>完成</button>
		</div>
	</div>
	 <div class="alert-error hide">
		<div class="alert-body">
			<h6>提示</h6>
			<img src="../img/alert_error.png" />
			<p>注册失败</p>
			<button>完成</button>
		</div>
	</div>
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script src="../mui.min.js"></script>
	<script type="text/javascript" src="../mui.picker.min.js"></script>
	
	<script type="text/javascript" src="../mui.dtpicker.js"></script>
	<script type="text/javascript">
		var picker = new mui.PopPicker({
			layer: 3
		}); 
		picker.setData([{
            value: '110000',
            text: '北京市',
            children: [{
				value: "110000",
				text: "北京市",
				children:[{
					value: "110101",
					text: "东城区",
				},{
					value: "110102",
					text: "西城区",
				}]
            }]
        },{
            value: '110000',
            text: '浙江省',
            children: [{
				value: "110000",
				text: "杭州市",
				children:[{
					value: "110101",
					text: "上城区",
				},{
					value: "110101",
					text: "下城区",
				}]
            }]
        }])
		$('.picker').click(function(e){
			$('.picker input').blur();
			picker.show(function(items) {
				$('.picker input').val(items[0].text+items[1].text+items[2].text)
			})
		})

		
		 var birth = new mui.DtPicker({
		 	type: "date",//设置日历初始视图模式 
		    beginDate: new Date(2015, 04, 25),//设置开始日期 
		    endDate: new Date(2016, 04, 25),//设置结束日期 
		 }); 
		$('.birth').click(function(e){
			$('.birth input').blur();
			birth.show(function(items) {
				console.log(items);
				$('.birth input').val(items.text)
			})
		})

		$('.tab div').click(function(e){
			if(!$(this).hasClass('select')){
				$('.tab div').removeClass('select');
				$(this).addClass('select')
			}
			$('.profile-body').addClass('hide');
			$('.score-body').addClass('hide');
			$('.record-body').addClass('hide');
			$('.product-body').addClass('hide');

			switch(Number(e.currentTarget.title)){
				case 1: {
					$('.profile-body').removeClass('hide');
					break;
				}
				case 2:{
					$('.score-body').removeClass('hide');
					break;
				}
				case 3:{
					$('.record-body').removeClass('hide');
					break;
				}
				case 4:{
					$('.product-body').removeClass('hide');
					$('.product-body .button-body').removeClass('hide')
					break;
				}
			}
		})
		$('.icon img').click(function(e){
			if($(this).hasClass('unselect')){
				$(this).addClass('hide');
				$(this).parent('.icon').find('.select').removeClass('hide');
			}else{
				$(this).addClass('hide');
				$(this).parent('.icon').find('.unselect').removeClass('hide');
			}
		})
		$('.register').click(function(){
			if($('.alert').hasClass('hide')){
				$('.alert').removeClass('hide');
			}
		})
		$('.register').click(function(){
			if($('.alert').hasClass('hide')){
				$('.alert').removeClass('hide');
			}
			
		})
		$('.cancel').click(function(){
			if($('.alert-error').hasClass('hide')){
				$('.alert-error').removeClass('hide');
			}
		})
		$('.alert button,.alert-error button').click(function(){
			if(!$('.alert').hasClass('hide')){
				$('.alert').addClass('hide');
			}
			if(!$('.alert-error').hasClass('hide')){
				$('.alert-error').addClass('hide');
			}
		})
		$('.product-body .button-body button:last-child').click(function(){
			$('.product-body .icon').find('.unselect').removeClass('hide');
			$('.product-body .icon').find('.select').addClass('hide');
		})
	</script>
</body>